<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/test.css">
</head>
<body>
<!--<style>-->
<!--    /*取消内边距*/-->
<!--    * {-->
<!--        margin: 0;-->
<!--    }-->
<!--    /*主体部分*/-->
<!--    body {-->
<!--        width: 100vw;-->
<!--        height: 100vh;-->
<!--        display: flex;-->
<!--        background: linear-gradient(to right, rgb(0, 198, 255), rgb(0, 114, 255));-->
<!--        justify-content: center;-->
<!--        align-items: center;-->
<!--    }-->
<!--    /*登录卡片部分*/-->
<!--    .main-1 {-->
<!--        width: 800px;-->
<!--        height: 400px;-->
<!--        background-color: rgb(0, 198, 255);-->
<!--        display: flex;-->
<!--        border-radius: 20px;-->
<!--        box-shadow: 1px 1px 2px rgb(0, 114, 255);-->
<!--    }-->
<!--    /*登录卡片左部分*/-->
<!--    .left-1 {-->
<!--        width: 45%;-->
<!--        height: 100%;-->
<!--        background-color: #89CFF0;-->
<!--        border-radius: 20px 0 0 20px;-->
<!--        background-image: url(../../static/image/海边少年.jpeg);-->
<!--        background-size: cover;-->
<!--    }-->
<!--    /*登录卡片右部分*/-->
<!--    .right-1 {-->
<!--        flex: 1;-->
<!--        width: 60%;-->
<!--        height: 100%;-->
<!--        display: flex;-->
<!--        align-items: center;-->
<!--        flex-direction: column;-->
<!--    }-->
<!--    /*登录卡片标题部分*/-->
<!--    p {-->
<!--        font-size: 1.9rem;-->
<!--        margin-top: 30px;-->
<!--        color: rgb(0, 144, 255);-->
<!--    }-->
<!--    /*登录卡片账号框与密码框部分*/-->
<!--    .input-1 {-->
<!--        margin-top: 20px;-->
<!--        width: 300px;-->
<!--        height: 40px;-->
<!--        border: none;-->
<!--        background: none;-->
<!--        font-size: 16px;-->
<!--        border-bottom: 1px solid rgb(0, 114, 255);-->
<!--        outline: none;-->

<!--    }-->
<!--    /*登录卡片原登录按钮部分*/-->
<!--    /*.input-2 {*/-->
<!--    /*    width: 230px;*/-->
<!--    /*    height: 40px;*/-->
<!--    /*    border-radius: 10px;*/-->
<!--    /*    margin-top: 40px;*/-->
<!--    /*    border: none;*/-->
<!--    /*    background: linear-gradient(to right, rgb(0, 198, 255), rgb(0, 114, 255));*/-->
<!--    /*}*/-->

<!--    /*原登录按钮*/-->
<!--    /*.input-2:hover {*/-->
<!--    /*    box-shadow: 1px 1px 2px rgb(0, 114, 255);*/-->
<!--    /*}*/-->
<!--    /*找回密码与忘记密码部分*/-->
<!--    form {-->
<!--        width: 100%;-->
<!--        height: 40px;-->
<!--        display: flex;-->
<!--        /*相隔开*/-->
<!--        justify-content: space-around;-->
<!--    }-->
<!--    span{-->
<!--        text-decoration: none;-->
<!--        color: rgb(0, 144, 255);-->
<!--        justify-content: space-around;-->
<!--    }-->
<!--    /*找回密码与忘记密码部分*/-->
<!--    a {-->
<!--        text-decoration: none;-->
<!--        color: rgb(0, 144, 255);-->
<!--        margin-top: 55px;-->
<!--    }-->
<!--    /*找回密码与忘记密码点击特效*/-->
<!--    a:hover {-->
<!--        color: mediumspringgreen;-->
<!--    }-->

<!--    .button {-->
<!--        all: unset;-->
<!--        display: flex;-->
<!--        align-items: center;-->
<!--        position: relative;-->
<!--        padding: 0.1em 0.5em;-->
<!--        border: mediumspringgreen solid 0.15em;-->
<!--        border-radius: 0.25em;-->
<!--        color: mediumspringgreen;-->
<!--        font-size: 1.5em;-->
<!--        font-weight: 400;-->
<!--        cursor: pointer;-->
<!--        overflow: hidden;-->
<!--        transition: border 300ms, color 300ms;-->
<!--        user-select: none;-->
<!--    }-->
<!--    .button p {-->
<!--        z-index: 1;-->
<!--    }-->

<!--    .button:hover {-->
<!--        color: #212121;-->
<!--    }-->

<!--    .button:active {-->
<!--        border-color: teal;-->
<!--    }-->
<!--    /*按钮左右两边阴影部分*/-->
<!--    .button::after, .button::before {-->
<!--        content: "";-->
<!--        position: absolute;-->
<!--        width: 9em;-->
<!--        aspect-ratio: 1;-->
<!--        background: mediumspringgreen;-->
<!--        opacity: 50%;-->
<!--        border-radius: 50%;-->
<!--        transition: transform 500ms, background 300ms;-->
<!--    }-->

<!--    .button::before {-->
<!--        left: 0;-->
<!--        transform: translateX(-8em);-->
<!--    }-->

<!--    .button::after {-->
<!--        right: 0;-->
<!--        transform: translateX(8em);-->
<!--    }-->

<!--    .button:hover:before {-->
<!--        transform: translateX(-1em);-->
<!--    }-->

<!--    .button:hover:after {-->
<!--        transform: translateX(1em);-->
<!--    }-->

<!--    .button:active:before,-->
<!--    .button:active:after {-->
<!--        background: teal;-->
<!--    }-->
<!--</style>-->
<div class="main-1" style="width: 900px;height: 470px">
    <div class="left-1"></div>
    <div class="right-1">
        <p>登录</p>
        <label for="usernameIpt">
            <input id="usernameIpt" class="input-1" type="text" placeholder="用户名"/>
        </label>
        <label for="passwordIpt">
            <input id="passwordIpt" class="input-1" type="password" placeholder="密码"/>
        </label>
        <!--登录按钮-->
        <button id="loginBtn" class="button" style="margin-top: 35px;height: 33px" >
            <p style="margin-bottom: 20px; font-size: 20px;">Login</p>
        </button>
        <div>
            <a class="login-sns-item" href="#">
                <img src="static/image/微信图标.jpg" href="#" style="height: 40px;width: 40px;border-radius: 50%;margin-top: 33px" alt="该图片下班了...">
            </a>
            <span>微信登录</span>
            <a class="login-sns-item" href="#">
                <img src="static/image/QQ.png" href="#" style="height: 40px;width: 40px;border-radius: 50%;margin-top: 33px" alt="该图片走丢中...">
            </a>
            <span>QQ登录</span>
            <a class="login-sns-item" href="#">
                <img src="static/image/微博.png" href="#" style="height: 40px;width: 40px;border-radius: 50%;margin-top: 33px" alt="该图片去旅游中...">
            </a>
            <span>微博登录</span>
        </div>
        <form>
            <a href="#">找回密码</a>
            <a href="#">忘记密码</a>
        </form>
    </div>
</div>

</body>
</html>